<!-- eslint-disable vue/multi-word-component-names -->
<template>
      <div class="bigBox">
            <div class="tabListBox">
                  组件及二次封装
                  <div class="optionsMenu" v-for="item in classifiedData.original" :key="item.path" @click="routerGo(item.path)">{{
                        item.name }}</div>
                        <br>
                  功能实现
                    <div class="optionsMenu" v-for="item in classifiedData.Secondary" :key="item.path" @click="routerGo(item.path)">{{
                        item.name }}</div>
            </div>
            <div class="displayPage">
                  <RouterView />
            </div>
      </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import otherRouters from '@/router/com/other'
import { useRouter } from 'vue-router';
const router = useRouter();

interface DataItem {
  path: string;
  name: string;
  meta: {
    title: string;
    illustrate: string;
    classification: string;
  };
}
// 分类数据
function classifyData(data: DataItem[]): { [key: string]: DataItem[] } {
  let classifiedData: { [key: string]: DataItem[] } = {};
  data.forEach(obj => {
    const classification = obj.meta.classification;
    if (classifiedData[classification]) {
      classifiedData[classification].push(obj);
    } else {
      classifiedData[classification] = [obj];
    }
  });
  return classifiedData;
}
const classifiedData = classifyData(otherRouters);

const routerGo = (path: string) => {
      router.push(path)
}
onMounted(() => {

})

</script>
<style scoped lang='scss'>
.bigBox {
      display: flex;
      max-width: 100vw;

      .tabListBox {
            flex: 0;
            border-right: 1px solid #ccc;
            min-width: 150px;
            max-width: 150px;

            .optionsMenu {
                  padding: 0 10px;
                  height: 30px;
                  line-height: 30px;
                  cursor: pointer;
            }

            .optionsMenu:hover {
                  background-color: #eee;
            }
      }

      .displayPage {
            flex: 1;
            max-width: calc(100vw - 151px);
            overflow-x: hidden;
            // display: flex;
            // justify-content: center;
            // align-items: center;
      }
}
</style>